<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>列表 - easyui</title>
		<%@ include file="/common/include/title.jsp" %>
		
		<script type="text/javascript" charset="utf-8" src="${rootPath }/ueditor/ueditor.config.js"></script>
	    <script type="text/javascript" charset="utf-8" src="${rootPath }/ueditor/ueditor.all.js"> </script>
	    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
	    <!--这里加载的语言文件会覆盖你在配置项目里更新的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
	    <script type="text/javascript" charset="utf-8" src="${rootPath }/ueditor/lang/zh-cn/zh-cn.js"></script>
		
		<script type="text/javascript">
			function dataSubmit()
			{
				//alert("-----");
				/* 根据id查找表单
					让easyui提交表单
				*/
				$("#form").form("submit",
				{
					onSubmit:function()
					{
						/* 做一些检查
							返回true提交,返回false:不提交
						*/
						//alert("--检查-");
						return $(this).form("validate");
					},
					success:function(data)
					{
						/* alert("====" + data) */
						console.log("====" + data);
						/*
							eval:js的解析器;参数可以是js代码;然后eval相当执行了js代码
							data:是一个json;返回的时候全部是字符串
							json:在js中就是一个对象
						*/
						var dataTar = eval("(" + data + ")");
						/* data就是服务器端给的响应 */
						$.messager.alert("提示信息",dataTar.info);
					}
				});
				return false ; 
			}
			
			/*
				当下拉框发生修改的时候,触发的事件
			*/
			/* function specChange()
			{
				alert("----")
				return true ; 
			} */
			
			/* 在页面加载的时候触发 */
			$(function()
			{
				/* 正定义下拉框,增加事件 */
				$('#cateId').combobox({
					onSelect: function(record){
						//alert(record.text + "----" + record.value + "--->" );
						/* 取出json的值  使用easyui根本获取不到option自己增加的属性 */
						/* 使用原生的jquery 
							取到选择的option
						*/
						/* alert($('#cateId').children("option[value="+ record.value +"]").attr("spec")); */
						var specStr = $('#cateId').children("option[value="+ record.value +"]").attr("spec");
						/* alert("===>" + specStr) */
						console.info("-specStr-->" + specStr.length);
						/* 从html元素中获取的数据,全部是字符串
							将字符串变成JSON
							 $.parseJSON(specStr):json字符串得是双引号
						*/
						/* var s = "[{\"code\":\"0\",\"info\":\"成功\"},{\"code\":\"0\",\"info\":\"成功\"}]" ; 
						var specArr = $.parseJSON(s); */
						/* 将字符串变成json还有js原生的方法
							eval();
						*/
						var specArr = eval("(" + specStr + ")");
						console.info("-specArr-->" + specArr.length);
						
						/* 使用js操作dom
							拼装以下html代码:
						<tr>
							<td>主体:</td>
							<td></td>
						</tr>
						<tr>
							<td>系列:</td>
							<td>
								<select>
									<option>T 系列</option>
									<option>E 系列</option>
									<option>SL 系列</option>
								</select>
							</td>
						</tr>
						*/
						/* 先把原来的规格给删除 */
						$(".specContent").remove();
						
						var html = "" ;
						/* 对json数据进行处理 */
						/* 这是第一层循环,处理规格的分类 */
						for(var i = 0 ; i < specArr.length; i ++)
						{
							var specTemp = specArr[i];
							console.info("--->" + specTemp.name);
							html = html + "<tr class='specContent'>            ";
							html = html + "	<td>"+ specTemp.name +":</td> ";
							html = html + "	<td></td>      ";
							html = html + "</tr>           ";
							
							/* 第二层循环,处理规格的键 */
							for(var j = 0 ; j < specTemp.keys.length; j ++)
							{
								var specKeyTemp = specTemp.keys[j];
								console.info(specKeyTemp.name + "--->" + specKeyTemp.values);
								
								html = html + "<tr class='specContent'>                              ";
								html = html + "	<td>"+ specKeyTemp.name +":</td>                   ";
								html = html + "	<td>                             ";
								html = html + "		<select name='specVal_"+ specTemp.name +"_"+ specKeyTemp.name +"' class='easyui-combobox'>                     ";
								/* 第三层循环:处理规格的值;值是有多个,要出现下拉框,让选择 */
								for(var k = 0 ; k < specKeyTemp.values.length ; k ++)
								{
									/* 规格的值:有多个,出现下拉框选择 */
									var value = specKeyTemp.values[k];
									console.info("===>" + value);
									html = html + "			<option>"+ value +"</option> ";
								}
								html = html + "		</select>                    ";
								html = html + "	</td>                            ";
								html = html + "</tr>                             ";
							}
						}
						
						/* 拼装HTML完成
							将拼装好的HTML代码放到合适的位置上
							
							JS操作DOM元素;
							获取到dom元素
							获取三要素:
							修改三要素;
						*/
						console.info("==specDiv=>" + html);
						/* 将specDiv的开始标签和结束标签修改为拼装的HTML代码 */
						$("#specDiv").after(html);
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="dataDialog" class="easyui-panel" title="商品更新"  
			data-options="iconCls:'icon-save'">
			<form id="form" action="${rootPath }/back/goods/goodsUpdateSubmit.html" method="post" onsubmit="return dataSubmit()">
				<!-- 更新的时候一定要传入商品id -->
				<input type="hidden" name="goodsId" value="${requestScope.goods.id }">
				<table>
					<tr id="specDiv">
						<td>
							分类:
						</td>
						<td>
							<select id="cateId" name="cateId" class="easyui-combobox" onchange="return specChange()">
								<%-- 商品更新页面,终于要从数据库中取东西了 
									将下拉框里面的内容,任何dom元素的属性都可以存储值
									双引号套双引号;里面的双引号要用单引号
									
									JSTL里面的fn函数
								--%>
								<c:forEach items="${requestScope.cateList }" var="cate" varStatus="stat">
									<option value="${cate.id }" ${cate.leafStatus == '1' ? '' : 'disabled' }
										${cate.id == requestScope.goods.cateId ? 'selected' : '' }
										spec="${fn:replace(cate.specArr,"\"","'")}">${cate.treeName }</option>
								</c:forEach>
							</select>
						</td>
					</tr>
					<c:forEach items="${requestScope.goods.specArr }" var="spec" varStatus="stat">
						<tr>
							<td>
								${spec.name }:
							</td>
							<td>
								
							</td>
						</tr>
						
						<!-- 系列 -->
						<c:forEach items="${spec.keys }" var="keys" varStatus="stat1">
							<tr>
								<td>
									${keys.name }:
								</td>
								<td>
									${keys.values }
								</td>
							</tr>
						</c:forEach>
					</c:forEach>
					<tr>
						<td>
							品牌:
						</td>
						<td>
							<select name="brandId" class="easyui-combobox">
								<%-- 商品更新页面,终于要从数据库中取东西了 --%>
								<c:forEach items="${requestScope.brandList }" var="brand" varStatus="stat">
									<option value="${brand.id }" ${brand.id == requestScope.goods.brandId ? 'selected' : '' }>${brand.name }</option>
								</c:forEach>
							</select>
						</td>
					</tr>
					<tr>
						<td>
							前台名字:
						</td>
						<td>
							<input type="text" name="name" class="easyui-textbox" placeholder="前台名字" data-options="required:true"
								value="${requestScope.goods.name }"/>
						</td>
					</tr>
					<tr>
						<td>
							后台名字:
						</td>
						<td>
							<input type="text" name="title" class="easyui-textbox" placeholder="后台名字" data-options="required:true"
								value="${requestScope.goods.title }"/>
						</td>
					</tr>
					<tr>
						<td>
							拼音 (url):
						</td>
						<td>
							<input type="text" name="url" class="easyui-textbox" placeholder="拼音 (url)" data-options="required:true"
								value="${requestScope.goods.url }"/>
						</td>
					</tr>
					<tr>
						<td>
							重量:
						</td>
						<td>
							<input type="text" name="weight" class="easyui-numberspinner" placeholder="重量" data-options="required:true"
								value="${requestScope.goods.weight }"/>
						</td>
					</tr>
					<tr>
						<td>
							库存量:
						</td>
						<td>
							<input type="text" name="remainNum" class="easyui-numberspinner" placeholder="库存量" data-options="required:true"
								value="${requestScope.goods.remainNum }"/>
						</td>
					</tr>
					<tr>
						<td>
							市场价:
						</td>
						<td>
							<input type="text" name="marketPrice" class="easyui-numberspinner" placeholder="市场价" data-options="required:true,precision:2"
								value="${requestScope.goods.marketPrice }"/>
						</td>
					</tr>
					<tr>
						<td>
							现价:
						</td>
						<td>
							<input type="text" name="price" class="easyui-numberspinner" placeholder="现价" data-options="required:true,precision:2"
								value="${requestScope.goods.price }"/>
						</td>
					</tr>
					<tr>
						<td>
							发布时间:
						</td>
						<td>
							<input type="text" name="pubTimeStr" class="easyui-datetimebox" placeholder="发布时间" 
								value="<fmt:formatDate value="${requestScope.goods.pubTime }" pattern="yyyy-MM-dd HH:mm:ss"/>"
							data-options="required:true"/>
						</td>
					</tr>
					<tr>
						<td>
							状态:
						</td>
						<td>
							<label for="status1">
								<input type="radio" name="status" value="1" id="status1" ${requestScope.goods.status == '1' ? 'checked' : '' }/>
								启用
							</label>
							<label for="status0">
								<input type="radio" name="status" value="0" id="status0" ${requestScope.goods.status == '0' ? 'checked' : '' }/>禁用
							</label>
						</td>
					</tr>
					<tr>
						<td>
							内容:
						</td>
						<td>
							<!-- <textarea rows="5" cols="50" name="content" data-options="required:true"></textarea> -->
							<!-- 一定要加上name属性,开始标签和结束标签就是编辑器默认的内容 -->
							<script id="content" name="content" type="text/plain" style="width:100%;height:300px;">${requestScope.goods.content}</script>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<input class="easyui-linkbutton" type="submit" value="提交">
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
// 参数为id的script
var ue = UE.getEditor('content');
</script>